<template>
  <div class="meetingInfo">
    <el-form
      ref="form"
      v-loading="loading"
      :model="form"
      :inline="true"
    >
      <el-row style="border-top: 1px solid #DFE6EC;">
        <el-col :span="12">
          <el-form-item :label="$t('会议主题')" prop="title" style="border-right: 0;">
            <el-input v-model="form.title" :placeholder="$t('会议主题')" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('会议类型')" prop="type">
            <el-select v-model="form.type" :placeholder="$t('会议类型')" disabled>
              <el-option
                v-for="(type, index) in mtTypeOptions"
                :key="index"
                :value="type.id"
                :label="$t(type.mtTypeLabel)"
                class="text"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('会议地点')" prop="place" style="border-right: 0;">
            <el-select v-model="form.place" disabled :placeholder="$t('会议地点')">
              <el-option
                v-for="(item, index) in meetingRoomOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('会议时间')" prop="time">
            <el-input v-model="form.time" :placeholder="$t('会议时间')" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('参会人员')" prop="attendees">
            <UserSelect
              v-model="form.member"
              style="width: 100%"
              :multiple="true"
              :placeholder="this.$t('选择用户')"
              disabled
            />
          </el-form-item>
        </el-col>
        <div v-for="(item,index) in form.voteDetails" :key="index" class="borderBottom">
          <el-col :span="24">
            <div class="el-form-item" style="display: flex;padding: 10px 15px;">
              <div style="flex: 1;font-weight: 700;font-size: 14px;color: #606266;">{{ item.dealName }}</div>
              <div style="flex: 1;text-align: right;">
                <span style="font-size:14px;">{{ $t("表决意见") }}：</span>
                <el-radio-group v-model="item.opinion">
                  <el-radio
                    v-for="dict in conclusionOptions"
                    :key="dict.dictValue"
                    :label="dict.dictValue"
                  >{{ $t(dict.dictLabel) }}
                  </el-radio>
                </el-radio-group>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="el-form-item" style="display: flex;">
              <el-table class="fileTable" :data="item.fileList" border>
                <el-table-column :label="$t('文件类型')" prop="directoryName" />
                <el-table-column :label="$t('文件名称')" prop="name">
                  <template slot-scope="scope">
                    <a v-if="scope.row.name !== '' || scope.row.name != null" class="link_a" @click="onlinePreview(scope.row, 'view')">
                      <div style="text-align: left;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ scope.row.name }}</div>
                    </a>
                  </template>
                </el-table-column>
                <el-table-column :label="$t('上传人')" prop="updateBy.nickName" />
                <el-table-column :label="$t('操作')" prop="updateBy.nickName" width="100">
                  <template slot-scope="scope">
                    <el-button type="text" @click="download(scope.row)">{{ $t('下载') }}</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="el-form-item">
              <div class="el-form-item__content" style="border: 0;">
                <el-input
                  v-model="item.opinionContent"
                  :autosize="{ minRows: 3, maxRows: 10}"
                  type="textarea"
                  :placeholder="$t('具体意见')"
                  show-word-limit
                  :maxlength="200"
                />
              </div>
            </div>
          </el-col>
        </div>
      </el-row>
    </el-form>
    <div v-if="btnHide !== true" slot="footer" class="dialog-footer" style="text-align: right;">
      <el-button @click="cancel()">{{ $t("取消") }} </el-button>
      <el-button v-if="true" type="info" @click="showImage">{{ $t('查看流程') }}</el-button>
      <el-button v-if="form.actStatus !== 'D' && form.actStatus !== 'W'" v-hasPermi="['meeting:minutes:edit']" type="primary" @click="submitForm('save')">{{ $t("保存") }}</el-button>
      <el-button v-if="form.actStatus !== 'D' && form.actStatus !== 'W'" v-hasPermi="['meeting:minutes:edit']" type="primary" @click="submitForm('process')">{{ $t("保存并启动流程") }}</el-button>
    </div>
    <FileTable v-show="false" ref="tableFile" />
  </div>
</template>
<script>
import { findAll } from '@/api/oa/type/mtType'
import { listOaMeetingRoom } from '@/api/oa/meeting/oaMeetingRoom'
import { showFlowChart } from '@/api/act/process/actProcess'
import { getProcessKey } from '@/api/act/process/wfMenuProcess'
import { getOaMtVote, getOaMtVoteByMeeting, saveOaMtVote } from '@/api/oa/business/oaMtVote'
import { downLoadFileOpen } from '@/utils/zipdownload'
export default {
  data() {
    return {
      menuKeys: 'mt_vote',
      // 流程图片是否展示
      imageOpen: false,
      // 流程数据
      processData: {},
      form: {},
      // 是否隐藏按钮
      btnHide: false,
      // 遮罩层
      loading: false,
      // 会议类型
      mtTypeOptions: [],
      // 会议室设置
      meetingRoomOptions: [],
      // 会议结论字典
      conclusionOptions: [],
      fileList: [
        { fileName: '123' }
      ]
    }
  },
  mounted() {
    this.$bus.$emit('async_done')
  },
  created() {
    findAll().then(response => {
      this.mtTypeOptions = response.data
    })
    listOaMeetingRoom(null).then(response => {
      this.meetingRoomOptions = response.rows
    })
    this.getDicts('meeting_conclusion').then(response => {
      this.conclusionOptions = response.data
    })
  },
  methods: {
    init(data) {
      this.loading = true
      if (data.meetingId !== undefined) {
        getOaMtVoteByMeeting(data.meetingId).then(response => {
          this.form = response.data
          this.loading = false
        })
      } else {
        getOaMtVote(data.id).then(response => {
          this.form = response.data
          this.loading = false
        })
      }
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.minutesOpen = false
      this.$parent.$parent.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        meetingId: undefined,
        actId: undefined,
        actStatus: undefined,
        remark: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        voteDetails: []
      }
      this.resetForm('form')
    },
    /** 提交按钮 */
    submitForm: function(type) {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.loading = true
            saveOaMtVote(this.form).then(response => {
              if (response.code === 200) {
                if (type === 'process') {
                  // 设置数据id方式启动流程后取消并再次启动会创建多条记录
                  this.form.id = response.data
                  // 启动流程
                  this.startProcess(response.data.id)
                } else {
                  this.msgSuccess(this.$t('保存成功'))
                  this.$emit('resetDetailList')
                  this.closeForm()
                }
                resolve()
              } else {
                this.msgError(response.msg)
                reject()
              }
              this.loading = false
            })
          } else {
            this.locationError(document)
          }
        })
      })
    },
    // 启动流程
    startProcess: function(dataId) {
      this.loading = false
      // 启动流程时候传入的参数
      const processData = {}
      // 待办标题
      processData.title = this.form.title
      // 业务表名
      processData.dataTable = 'oa_mt_vote'
      // 业务ID
      processData.dataId = dataId
      // 业务表单地址
      processData.formPath = '@/views/oa/business/voteForm'

      // 业务表单打印地址
      processData.viewPath = '@/views/oa/business/voteForm'

      // 菜单标识(根据菜单标识判断的走哪个流程)
      processData.processKey = 'vote_process'
      this.startProcessByMenu(processData, () => {
        this.form.actStatus = 'D'
        this.msgSuccess(this.$t('数据保存成功,流程启动成功'))
        this.closeForm()
      })
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      this.$parent.$parent.minutesOpen = false
      // // 刷新list页面
      // this.$parent.$parent.getList()
    },
    showImage() {
      this.$nextTick(() => {
        getProcessKey(this.menuKeys).then(res => {
          this.processData.processDefinitionKey = res.data
          showFlowChart(res.data).then(response => {
            this.imageOpen = true
            this.loading = true
            this.processData.photoBase64 = response.data
            this.loading = false
          })
        })
      })
    },
    // 下载附件
    download(row) {
      const fileId = row.id ? row.id : row.fileSource
      console.log(row, fileId)
      downLoadFileOpen(fileId)
    },
    // 预览附件
    onlinePreview(row, type) {
      this.$refs.tableFile.onlinePreview(row, type)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.fileTable.el-table--border {
  border: none;
}
/deep/.fileTable.el-table::before {
  height: 0px;
}
/deep/.fileTable.el-table--border::after {
  width: 0px;
}
/deep/.fileTable.el-table--border {
  .el-table__cell:nth-child(4){
    border-right: none !important;
  }
}
/deep/.fileTable.el-table--medium .el-table__cell{
  padding: 12px 0;
}
/deep/.fileTable.el-table {
  td.el-table__cell:last-child{
    border-right: none !important;
  }
  tbody {
    tr:last-child {
      td.el-table__cell {
        border-bottom: none !important;
      }
    }
  }
  th.el-table__cell.is-leaf:last-child{
    border-right: none !important;
  }
}
/deep/.fileTable.el-table--border .el-table__cell:last-child{
  border-right: none !important;
}
/deep/.el-input.is-disabled .el-input__inner{
  background-color: #fff;
  cursor: text;
}
</style>
